<template>
  <div class="user-page">
    <div class="Uheader">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="背景图" />
      <div class="box">
        <div>
          <img
            class="avatar"
            :src='avatar'
            alt="头像"
          />
        </div>
        <div v-if="!token">
          <div class="username">游客</div>
          <div class="login">
            <van-button type="info" size="small" native-type="submit" to="/login">去登录</van-button>
          </div>
        </div>
        <div v-else>
          <div class="username">{{this.nickname}}</div>
          <div class="login">
            <van-button type="info" size="mini" native-type="submit" @click="Logout">退出</van-button>
            <p>编辑个人资料<van-icon name="arrow" /></p>
          </div>
        </div>
      </div>
    </div>
    <div class="Ubody">
      <van-grid :column-num="3">
        <van-grid-item to='/favorites' icon="star-o" text="我的收藏" />
        <van-grid-item to='/myHire' icon="wap-home-o" text="我的出租" />
        <van-grid-item to='/viewRecords' icon="clock-o" text="看房记录" />
        <van-grid-item to='/houseOwner' icon="vip-card-o" text="成为房主" />
        <van-grid-item to='/personalData' icon="user-o" text="个人资料" />
        <van-grid-item to='/contactUs' icon="service-o" text="联系我们" />
      </van-grid>
    </div>
    <div class="Ubottom">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
import { getToken, delToken } from '@/utils/storage'
import { user, logout } from '@/api/user'
import { Dialog } from 'vant'
export default {

  name: 'user-page',
  data () {
    return {
      nickname: '',
      baseURL: 'http://liufusong.top:8080',
      avatar: 'http://liufusong.top:8080/img/profile/avatar.png',
      token: ''
    }
  },

  async created () {
    this.token = getToken()
    if (this.token) {
      const { body } = await user()
      console.log(body)
      this.avatar = this.baseURL + body.avatar
      this.nickname = body.nickname
    }
  },
  methods: {
    async Logout () {
      Dialog.confirm({
        title: '提示',
        message: '是否确认退出'
      })
        .then(async () => {
          await logout()
          delToken()
          this.$router.go(0)
          this.$toast.success('退出成功')
        }).catch(() => {
          // on cancel
          console.log('取消')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.Uheader {
  min-height: 300px;
  position: relative;
  img {
    height: 191px;
  }
  .box {
    position: absolute;
    background: #fff;
    width: 80%;
    height: 55%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px 3px #ddd;
    margin: 50px auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
    .avatar {
      position: relative;
      transform: translateY(-50%);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      border: 5px solid #f5f5f5;
      display: inline-block;
      box-shadow: 0 2px 2px #bdbdbd;
    }
  }
  .username {
    margin-top: -30px;
    margin-bottom: 10px;
  }
  .login {
    p{
      font-size: 12px;
      color: #bdbdbd;
    }
  }
}
.Ubottom {
  text-align: center;
  margin-top: 10px;
  img {
    width: 92%;
  }
}
</style>
